
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { Search, Close } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { fetchGetSocietyList } from '@/api/society/index'
import { usePublicStoreHook } from "@/store/modules/public";
import { fetchPostJoinSociety } from '@/api/public/societyApply'
import { useUserStore } from "@/store/modules/user";
import { fetchGetUserList, fetchPutUserInfo } from '@/api/user'
import { filterDate } from '@/utils/format'

const router = useRouter();

// 表单数据
let tableData = reactive([])
const customColors = [
  { color: '#38EF7D', percentage: 20 },
  { color: '#2FDC80', percentage: 40 },
  { color: '#25C585', percentage: 60 },
  { color: '#1BAF8A', percentage: 80 },
  { color: '#11998D', percentage: 100 },
]
/**
 * 跳转
 */
const navDetail = (row: any) => {
  console.log(row);
  router.push({ path: '/student/society/detail', query: { ...row } })
}
const total = ref<number>(0)// 列表总数
// 实际传递的条件
const listQuery = reactive({
  currentPage: 1,
  name: undefined, // 名称
  type: undefined, // 类型
  status: undefined, // 招新状态
  pageSize: 10
})
// 显示在界面上的查询条件
const showQuery = reactive({
  currentPage: 1,
  name: undefined, // 名称
  type: undefined, // 类型
  status: undefined, // 招新状态
})
// 查询
const handleSearch = () => {
  getPageList()
}
// 社团类型
let typeOptions = ref([
  {
    id: '',
    name: ''
  }
])

const tableLoading = ref(false)

// 获取列表
const getPageList = async () => {
  tableLoading.value = true
  listQuery.name = showQuery.name
  listQuery.type = showQuery.type
  listQuery.status = showQuery.status
  const res = await fetchGetSocietyList(listQuery)
  const { currentPage, data } = res.data
  listQuery.currentPage = showQuery.currentPage = currentPage
  total.value = res.data.total
  tableData = data
  tableLoading.value = false
}

// 招新状态
const statusOptions = [
  {
    value: 0,
    label: '正在招新',
  },
  {
    value: 1,
    label: '已招满',
  },
  {
    value: 2,
    label: '暂不招新',
  },
]

const handleJoin = (row: { minister: any; }) => {
  ElMessageBox.confirm(
    '当前操作会发起加入社团申请，是否继续？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      const params = {
        personId: useUserStore().userInfo.id,
        applyType: 5,
        checkPerson: row.minister
      }
      fetchPostJoinSociety(params).then((res) => {
        if (Number(res.code) === 200) {
          ElMessage({
            type: 'success',
            message: '操作成功，等待审批',
          })
        }
      })

    })
    .catch(() => {
    })
}

const filterType = (type: any) => {
  for (let i = 0; i < typeOptions.value.length; i++) {
    if (typeOptions.value[i].id === type) return typeOptions.value[i].name
  }
}
onMounted(() => {
  getPageList()
  typeOptions.value = usePublicStoreHook().societyTypeList
})

let table1 = ref(false) // 查看详情抽屉
let table4 = ref(false) // 人员管理抽屉
let tableData1 = ref({
  name: null,
  createdAt: null,
  imgurl: null,
  introduce: null,
})
const handleCheck = (row: any) => {
  table1.value = true
  tableData1.value = row
  console.log(row)
}
let dialogData1 = reactive({
  address: "篮球场",
  applicationEndTime: "2023-05-01T22:57:16.000Z",
  applicationStartTime: "2023-04-30T22:57:12.000Z",
  attachment: null,
  createdAt: "2023-04-30T22:56:07.000Z",
  examine: 1,
  form: 1,
  formalEndTime: "2023-05-04T22:57:49.000Z",
  formalStartTime: "2023-05-01T22:57:33.000Z",
  id: 3,
  imgurl: "http://rtd5c53vw.hn-bkt.clouddn.com/1682854657053-%E9%AD%94%E6%9C%AFa.png",
  introduce: "魔术社的第一届的活动，希望通过本次活动让大家快速的熟悉起来",
  name: "趣味魔术表演赛",
  nowNumber: 1,
  person: "-36-37-38-",
  planBook: null,
  planNumber: 30,
  score: "1.5",
  society: 59,
  status: 0,
  summary: null,
  type: 0,
  updatedAt: "2023-04-30T22:56:10.000Z",
})
// 将人员移出活动
const removePerson = (row: any) => {
  console.log(row)
  ElMessageBox.confirm(
    `是否将 ${row.name} 移出社团？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      getPageList()
      ElMessage({
        message: '取消成功',
        type: 'success'
      })
    })
    .catch(() => {
    })
}

// 表单数据
let tableData2 = reactive([])
const total2 = ref<number>(0)// 活动人员列表总数
// 实际传递的条件
let listQuery2 = reactive({
  currentPage: 1,
  pageSize: 10,
  society: ''
})
// 获取列表
const getPageList2 = async () => {
  const res = await fetchGetUserList(listQuery2)
  const { currentPage, data } = res.data
  listQuery2.currentPage = showQuery.currentPage = currentPage
  total2.value = res.data.total
  tableData2 = data
}
/**
 * 过滤学院
 */
const filterCollege = (college: any) => {
  let collegeName = ''
  usePublicStoreHook().collegeList.forEach((item) => {
    if (item.id == college) {
      collegeName = item.name
    }
  })
  return collegeName
}
/**
 * 过滤专业
 */
const filterMajor = (major: any) => {
  let majorName = ''
  usePublicStoreHook().majorList.forEach((item) => {
    if (item.id == major) {
      majorName = item.name
    }
  })
  return majorName
}
/**
 * 过滤年级
 */
const filterGrade = (grade: any) => {
  let gradeName = ''
  usePublicStoreHook().gradeList.forEach((item) => {
    if (item.id == grade) {
      gradeName = item.name
    }
  })
  return gradeName
}

// 点击人员
const handlePerson = (row: any) => {
  table4.value = true
  listQuery2.society = row.id
  getPageList2()
}
// 我的社团
const handleRemove = (row: any) => {
  ElMessageBox.confirm(
    '当前操作会将该同学移出社团，是否继续？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      let newSociety = '' || null
      const userSociety = row.society.split('-')
      if (userSociety.length == 3) {
        newSociety = null
      } else {
        for (let i = 0; i < userSociety.length; i++) {
          if (userSociety[i] == listQuery2.society) {
            userSociety.splice(i, 1)
          }
        }
        newSociety = userSociety.join('-')
      }
      fetchPutUserInfo({ id: row.id, society: newSociety })
      ElMessage({
        type: 'success',
        message: '操作成功',
      })
      getPageList2()
    })
    .catch(() => {
    })
}

</script>

<template>
  <div class="society-content">
    <div class="header flex flex-center">
      <el-input v-model="showQuery.name" placeholder="社团名称" clearable />
      <el-select v-model="showQuery.type" class="m-2" placeholder="社团规模" clearable>
        <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-select v-model="showQuery.type" class="m-2" placeholder="社团类型" clearable>
        <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-select v-model="showQuery.status" class="m-2" placeholder="招新状态" clearable>
        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" clearable />
      </el-select>
      <el-button type="primary" @click="handleSearch" :icon="Search" class="btn-green">
        查询
      </el-button>
    </div>
    <el-table :data="tableData" stripe v-loading="tableLoading">
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="name" label="社团名称" show-overflow-tooltip>
        <template #default="scope">
          <div class="check-wait pointer" @click="navDetail(scope.row)">
            {{ scope.row.name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="社团类型" show-overflow-tooltip>
        <template #default="scope">
          <div>{{ filterType(scope.row.type) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="introduce" label="社团简介" show-overflow-tooltip width="350" />
      <el-table-column prop="percentage" label="招新进度" width="250">
        <template #default="scope">
          <el-progress :percentage="Number((scope.row.nowNumber / scope.row.planNumber * 100).toFixed(1))"
            :color="customColors" :stroke-width="12" />
        </template>
      </el-table-column>
      <el-table-column prop="minister" label="剩余名额">
        <template #default="scope">
          <div>{{ scope.row.planNumber - scope.row.nowNumber }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="招新状态">
        <template #default="scope">
          <div v-if="scope.row.status == 0" class="theme-success">正在招新</div>
          <div v-if="scope.row.status == 1" class="theme-warn">暂不招新</div>
          <div v-if="scope.row.status == 2" class="theme-error">已招满</div>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="操作" min-width="100">
        <template #default="scope">
          <div class="theme-success">
            <el-button type="primary" class="btn-white" @click="handleCheck(scope.row)">查看</el-button>
            <el-button type="primary" class="btn-green" @click="handlePerson(scope.row)">人员</el-button>
            <el-button type="primary" class="btn-red" @click="navDetail(scope.row)">解散</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :total="total" v-model:page="listQuery.currentPage" v-model:limit="listQuery.pageSize" hide-on-single-page
      @pagination="getPageList" />

    <!-- 查看详情抽屉 -->
    <el-drawer v-model="table1" direction="rtl" size="70%">
      <template #header="{ titleId }">
        <h1 :id="titleId">查看社团信息</h1>
      </template>
      <div class="el-drawer-content detail-container">
        <h3 class="detail-item">{{ tableData1.name }}</h3>
        <p class="detail-item item-time">创建时间{{ filterDate(tableData1.createdAt) }}
          &nbsp;&nbsp;&nbsp;&nbsp;
        </p>
        <p class="detail-item item-introduce">
          {{ tableData1.introduce }}
        </p>
        <p class="detail-item item-img">
          <el-image style=" height: 600px" :src="tableData1.imgurl" :zoom-rate="1.2"
            :preview-src-list="[tableData1.imgurl]" fit="cover" />
        </p>
      </div>
    </el-drawer>

    <!-- 人员管理抽屉 -->
    <el-drawer v-model="table4" direction="rtl" size="80%">
      <template #header="{ titleId }">
        <h1 :id="titleId">{{ dialogData1.name + '人员名单' }}</h1>
      </template>
      <div class="progress-box flex justify-around items-center">
        <div class="box-item">
          <span class="progress-name">计划人数：</span>
          <span class="progress-count">{{ dialogData1.planNumber }}</span>
        </div>
        <div class="box-item">
          <span class="progress-name">现有人数：</span>
          <span class="progress-count">{{ dialogData1.nowNumber }}</span>
        </div>
        <div class="box-item">
          <span class="progress-name">剩余名额：</span>
          <span class="progress-count">{{ dialogData1.planNumber - dialogData1.nowNumber }}</span>
        </div>
      </div>
      <div class="el-drawer-content">
        <el-table :data="tableData2" stripe>
          <el-table-column type="index" label="序号" width="100" />
          <el-table-column prop="name" label="姓名" show-overflow-tooltip width="100" />
          <el-table-column prop="gender" label="性别" show-overflow-tooltip width="100">
            <template #default="scope">
              <div>
                {{ scope.row.gender == 0 ? '男' : '女' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="手机号" show-overflow-tooltip />
          <el-table-column prop="email" label="邮箱" show-overflow-tooltip />
          <el-table-column prop="stuCode" label="学号" sortable show-overflow-tooltip />
          <el-table-column prop="college" label="学院" show-overflow-tooltip>
            <template #default="scope">
              <div>
                {{ filterCollege(scope.row.college) || '--' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="major" label="专业" show-overflow-tooltip>
            <template #default="scope">
              <div>
                {{ filterMajor(scope.row.major) || '--' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="grade" label="年级" show-overflow-tooltip>
            <template #default="scope">
              <div>
                {{ filterGrade(scope.row.grade) || '--' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="operate" label="操作">
            <template #default="scope">
              <el-button class="btn-red" :icon="Close" @click="handleRemove(scope.row)">移出</el-button>
            </template>
          </el-table-column>
        </el-table>
        <Pagination :total="total2" v-model:page="listQuery2.currentPage" v-model:limit="listQuery2.pageSize"
          hide-on-single-page @pagination="getPageList2" />
      </div>
    </el-drawer>
  </div>
</template>
<style lang="scss" scoped>
.society-content {
  min-height: 80rem;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  display: grid;
  grid-template-rows: 8rem auto;
  gap: 2rem;
  padding: 2rem;

  .header {
    border: 1px solid #eee;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

    .el-input,
    .el-select {
      margin-right: 20px;
      width: 16%;
    }
  }
}

.detail-container {
  min-height: 45rem;
  background-color: #fff;
  padding: 2rem;
  color: #303133;

  .detail-item {
    margin: 1.4rem 0;
  }

  h3 {
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
  }

  .item-time {
    color: #808080;
    font-size: 1.6rem;
    text-align: center;
  }

  .item-introduce {
    text-indent: 2em;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 3rem;
  }

  .item-img {
    width: 100%;
    text-align: center;

    img {
      width: 50%;
    }
  }

  .item-next {
    span {
      margin: 0 1rem;
      font-size: 1.4rem;
    }
  }


}

.progress-box {
  font-size: 3rem;
  font-weight: 700;
  border: 2px solid #eee;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  color: #fff;
  background: $liner-tgreen;
  height: 8rem;
  margin-bottom: 2rem;

  .progress-name {}

  .box-item {
    margin-right: 2rem;
  }
}
</style>
<style lang="scss">
.el-drawer__header {
  margin-bottom: 0px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;

  h1 {
    text-align: center;
    color: #2FBFB7;
  }
}
</style>

